<template>
	<view class="container">
		<!-- 会员弹窗说明 -->
		<view class="cu-modal" @tap="hideModal" :class="modalName=='Modal'?'show':''" style="z-index: 99999;">
			<view class="cu-dialog" style="padding: 300rpx 0 70rpx;">
				<view class="modal_bg">
					<view class="title-header">
						<view class="title-text">
							服· 务 · 说 · 明
						</view>
					</view>
				</view>
				<view class="modal_main">
					<view class="padding-lr margin-top-xs">
						<view class="text-grey text-smdf">
							<text class="cuIcon-title text-blue margin-right-xs"></text>
							<text> 感谢大家 对「大学生联盟」的支持！</text>
						</view>

						<view class="text-grey text-smdf margin-top-sm">
							<text class="cuIcon-title text-blue margin-right-xs"></text>
							<text>为了能给与您更优质的服务,请添加我们的微信帮您进行一对一的服务！</text>
						</view>
						<view class="text-grey text-smdf margin-top-sm flexstyle">
							<u--image :showLoading="true" :src="src" width="180px" height="180px"></u--image>
						</view>



					</view>
				</view>
			</view>
		</view>
		<view class="bg-top bg-blue">
			<view class="top-box shadow">

				<view class="qh-title text-bold text-blue text-xl">
					<text>教员风采</text>
				</view>
				<view class="flexstylem30">
					<!-- <u-avatar  :size="60" :src="url_prefix+data.remark1"></u-avatar> -->
					<u--image :showLoading="true" :src="url_prefix+data.remark1" width="80px" height="80px" radius="4"
						@click="data.remark1"></u--image>
				</view>
				<!-- :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']" -->
				<view class="cu-list menu">
					<view class="cu-item" style="padding: 0;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;">
							<!-- <text class="cuIcon-locationfill text-red margin-right-xs"></text> -->
							<text class="text-black text-bold"
								style="min-width: 290rpx; max-width: 290rpx; text-align: left;">{{data.teacherName}}(ID:{{data.id}})</text>
							<!-- <text class="cuIcon-forwardfill text-blue margin-lr-sm"></text> -->

							<text class="text-black text-bold"
								style="min-width: 290rpx; max-width: 290rpx; text-align: left;"></text>
						</view>
					</view>

					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-friendaddfill text-green"></text>
							<text class="text-black">教师性别</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-green light">{{data.teacherGender}}</view>
						</view>
					</view>

					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-upstagefill text-yellow  margin-right-xs"></text>
							<text class="text-black">教师年龄</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-yellow light">{{data.teacherAge}}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-medalfill text-mauve  margin-right-xs"></text>
							<text class="text-black">教师学校</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-mauve light">{{data.teacherSchool}}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-selection text-cyan  margin-right-xs"></text>
							<text class="text-black">教师专业</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-cyan light">{{data.teacherSpeciality}}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-crownfill text-orange  margin-right-xs"></text>
							<text class="text-black">教师身份</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-orange light">{{data.teacherIdentity}}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-writefill text-purple  margin-right-xs"></text>
							<text class="text-black">教师教龄</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-purple light">{{data.teachingLength}}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-servicefill text-olive  margin-right-xs"></text>
							<text class="text-black">授课方式</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-olive light">{{data.teachingMethod}}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-global text-pink  margin-right-xs"></text>
							<text class="text-black">居住地址</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-pink light">{{data.teacherAddress}}</view>
						</view>
					</view>

					<!-- <view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-countdownfill text-purple  margin-right-xs"></text>
							<text class="text-black">家教时间</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-purple light">dasdasdadasdasdadsasd{{data.teachingTime}}</view>
						</view>
					</view> -->




					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-redpacket_fill text-red  margin-right-xs"></text>
							<text class="text-black">家教费用</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-red light">{{data.teachingPrice}}</view>
						</view>
					</view>
					<view class="bxBox">
						<text class="bxImg cuIcon-countdownfill text-purple"></text>
						<view class="title text-black">家教时间</view>
					</view>

					<view class='padding-bottom-sm flex flex-wrap bg-white' style="justify-content: flex-end;">
						<view class="action">
							<view class="cu-tag round bg-purple light"> {{data.teachingTime}}</view>
						</view>

					</view>
					<view class="bxBox">
						<text class="bxImg cuIcon-rankfill text-pink"></text>
						<view class="title text-black">家教区域</view>
					</view>

					<view class='padding-bottom-sm flex flex-wrap bg-white' style="justify-content: flex-end;">
						<view class="cu-tag margin-right-xs bg-blue light radius">
							{{data.teachingArea}}
						</view>
						<!-- <view class="cu-tag bg-purple light radius">
							海淀区
						</view>
						<view class="cu-tag bg-brown light radius">
							朝阳区
						</view>
						<view class="cu-tag bg-green light radius">
							西城区
						</view> -->
					</view>

					<view class="bxBox">
						<text class="bxImg cuIcon-form text-pink"></text>
						<view class="title text-black">家教科目</view>
					</view>

					<view class='padding-bottom-sm flex flex-wrap bg-white' style="justify-content: flex-end;">
						<view class="cu-tag margin-right-xs bg-pink light radius">
							{{data.teachingParentingSubjects}}
						</view>
						<!-- <view class="cu-tag bg-purple light radius">
							数学
						</view>
						<view class="cu-tag bg-brown light radius">
							英语
						</view>
						<view class="cu-tag bg-green light radius">
							法语
						</view> -->
					</view>




				</view>

			</view>
			<view class="center-box shadow   bg_white">
				<view class="cu-bar bg-white margin-top-xs u-border-bottom">

					<view class="action sub-title">

						<text class="text-xl text-bold text-blue text-shadow">授课时间（ 打对钩即为可授课时间） </text>
                       
						<text class="text-ABC text-blue">Time</text>

					</view>

				</view>

				<u-row justify="space-between ">
					<!-- <u-col span="1">
						<view class="demo-layout bg-purple-light"></view>
					</u-col> -->
					<u-col span="1.7">
						<view class="demo-layout bg-purple-light"></view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout bg-purple-light size ">周一</view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout bg-purple-light size ">周二</view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout bg-purple-light size ">周三</view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout bg-purple-light  size">周四</view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout bg-purple-light  size">周五</view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout bg-purple-light size ">周六</view>
					</u-col>
					<u-col span="1">
						<view class="demo-layout bg-purple-light size ">周天</view>
					</u-col>
					<!-- <u-col span="0.5">
						<view class="demo-layout bg-purple-light size"></view>
					</u-col> -->
				</u-row>
				<u-form-item label="上午" prop="remark8" borderBottom labelWidth="60" ref="item3">
					<u-checkbox-group v-model="data.remark8" shape="square" placement="row">
						<!-- {{checkboxList1}} -->
						<u-checkbox    :customStyle="{marginRight: '16px'}" v-for="(item, index) in checkboxList1"  activeColor="red"
							v-model="checked" :key="index" :label="item.position" :name="item.name" :disabled="item.disabled" :size="22">
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item label="下午" prop="remark9" borderBottom labelWidth="60" ref="item3">
					<u-checkbox-group v-model="data.remark9" shape="square" placement="row">
						<!-- {{checkboxList1}} -->
						<u-checkbox :customStyle="{marginRight: '16px'}" v-for="(item, index) in checkboxList2"
							v-model="checked" :key="index" :label="item.position" :name="item.name" :disabled="item.disabled":size="22">
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item label="晚上" prop="remark10" borderBottom labelWidth="60" ref="item3">
					<u-checkbox-group v-model="data.remark10" shape="square" placement="row">
						<!-- {{checkboxList1}} -->
						<u-checkbox :customStyle="{marginRight: '16px'}" v-for="(item, index) in checkboxList3"
							v-model="checked" :key="index" :label="item.position" :name="item.name" :disabled="item.disabled":size="22">
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</view>



			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">自我描述</text>
							<text class="text-ABC text-blue">AboutMyself</text>
						</view>
					</view>
					<view class='padding-bottom-sm padding-left-sm bg-white'>
						{{data.teacherDescribe}}
					</view>
				</view>
			</view>
			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">家教经验</text>
							<text class="text-ABC text-blue">Education</text>
						</view>
					</view>
					<view class='padding-bottom-sm padding-left-sm bg-white'>
						{{data.teacherExperience}}
					</view>
				</view>
			</view>
			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">所获证书</text>
							<text class="text-ABC text-blue">Certifications</text>
						</view>
					</view>
					<view class='padding-bottom-sm padding-left-sm bg-white'>
						{{data.teacherCertificate}}
					</view>
				</view>
			</view>





			<!-- 加入按钮 -->
			<view class="padding-lr flex margin-top-sm" style="justify-content: space-between;">
				<button class="cu-btn bg-blue margin-top-sm lg" style="width: 46%;" @click="showModal">联系名师</button>
				<button class="cu-btn bg-red margin-top-sm lg" style="width: 46%;" open-type="contact">联系客服</button>
			</view>

			<view class="padding-lr" style="margin-top: 15rpx; margin-bottom: 60rpx; height: 30rpx;">
				<!-- <text class="text-grey text-sm">"上车" 即可查看发布者信息，为保证您的拼单，请与发布者确认</text> -->
			</view>

		</view>
	</view>
</template>

<script>
	// import request from '@/common/request.js';

	export default {
		data() {
			return {
				joinList: [{

					},

				],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				data: {},
				modalName: null, //会员弹窗
				animation_timer: null, // 动画定时器
				width: 375,
				height: 1920,
				url_prefix: this.http.ipAddress.replace(/\/$/, ''),
				checkboxList1: [{
						name: 'Mon_1',
						position: '',
						disabled: true
					},
					{
						name: 'Tues_1',
						position: '',
						disabled: true
					},
					{
						name: 'Wed_1',
						position: '',
						disabled: true
					},
					{
						name: 'Thur_1',
						position: '',
						disabled: true
					},
					{
						name: 'Fri_1',
						position: '',
						disabled: true
					},
					{
						name: 'Sat_1',
						position: '',
						disabled: true
					},
					{
						name: 'Sun_1',
						position: '',
						disabled: true
					}
				],
				checkboxList2: [{
						name: 'Mon_2',
						position: '',
						disabled: true
					},
					{
						name: 'Tues_2',
						position: '',
						disabled: true
					},
					{
						name: 'Wed_2',
						position: '',
						disabled: true
					},
					{
						name: 'Thur_2',
						position: '',
						disabled: true
					},
					{
						name: 'Fri_2',
						position: '',
						disabled: true
					},
					{
						name: 'Sat_2',
						position: '',
						disabled: true
					},
					{
						name: 'Sun_2',
						position: '',
						disabled: true
					}

				],
				checkboxList3: [{
						name: 'Mon_3',
						position: '',
						disabled: true
					},
					{
						name: 'Tues_3',
						position: '',
						disabled: true
					},
					{
						name: 'Wed_3',
						position: '',
						disabled: true
					},
					{
						name: 'Thur_3',
						position: '',
						disabled: true
					},
					{
						name: 'Fri_3',
						position: '',
						disabled: true
					},
					{
						name: 'Sat_3',
						position: '',
						disabled: true
					},
					{
						name: 'Sun_3',
						position: '',
						disabled: true
					}

				]
			}
		},
		onShow() {

		},
		onLoad(e) {
			if (e) {

				this.id = e.id;
				// this.id = 23
				this.getNoticelist();


			}

		},
		onReachBottom() {

		},
		onShareAppMessage() {
			return {
				title: '分享'
			}
		},
		methods: {
			previewImg(photoImg) {

				let imgsArray = [];
				imgsArray[0] = this.url_prefix + photoImg;
				uni.previewImage({

					current: 0,
					urls: imgsArray
				});
			},

			showModal() {
				this.modalName = 'Modal'
			},
			hideModal() {
				this.modalName = null;
			},
			getNoticelist() {
				let that = this
				this.http.get("wechat/teacher/" + this.id, this.editFormFields, "正在递交数据....").then(result => {

					if (result.code == 200) {
						// this.$toast(data.msg)
						this.data = result.data;
						that.data.remark8=  result.data.remark8.split(",");
						that.data.remark9=  result.data.remark9.split(",");
						that.data.remark10= result.data.remark10.split(",");

					} else {
						this.$toast(result.msg)
					}
				})

			}
		}
	}
</script>
<style lang="less" scoped>
	.container {
		width: 750rpx;
		color: #333333;

		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}

	// 弹窗
	.cu-dialog {
		background: #FFFFFF;
		overflow: visible;
	}

	.modal_bg {
		width: 100%;
		height: 400rpx;
		position: absolute;
		top: -100rpx;
		background-image: url(https://zhoukaiwen.com/img/qdpz/modal_bg.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.modal_main {
		text-align: left;
		background-color: #FFFFFF;
	}

	.title-header {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		height: 120rpx;
		font-size: 40rpx;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		background-image: url(https://cdn.zhoukaiwen.com/wccswF.png);
		background-size: cover;
	}

	.title-text {
		background-image: -webkit-linear-gradient(0deg, #ff8a34, #FBBD12);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.flexstyle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flexstylem30 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
	}
	.size{
		font-size: 20rpx;
	}
</style>
